<template>
  <div id="app4">
    <NavBar />
  <div class="photos-container">
    <!-- 顶部筛选区 -->
    <div class="photos-header">
      <el-row :gutter="20" align="middle">
        <el-col :span="6">
          <h2>抗战历史影像</h2>
        </el-col>
        <el-col :span="12">
          <el-input
            v-model="searchQuery"
            placeholder="搜索图片描述..."
            prefix-icon="Search"
          >
            <template #append>
              <el-select v-model="category" placeholder="分类" style="width: 120px">
                <el-option label="全部" value="" />
                <el-option label="战役场景" value="battle" />
                <el-option label="军民生活" value="life" />
                <el-option label="重要人物" value="person" />
                <el-option label="历史文物" value="relic" />
              </el-select>
            </template>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-radio-group v-model="viewMode" size="large">
            <el-radio-button label="grid">
              <el-icon><Grid /></el-icon>
            </el-radio-button>
            <el-radio-button label="timeline">
              <el-icon><Timer /></el-icon>
            </el-radio-button>
          </el-radio-group>
        </el-col>
      </el-row>
    </div>

    <!-- 网格视图 -->
    <div v-if="viewMode === 'grid'" class="photos-grid">
      <el-row :gutter="20">
        <el-col 
          v-for="photo in filteredPhotos" 
          :key="photo.id"
          :xs="24" 
          :sm="12" 
          :md="8" 
          :lg="6"
        >
          <div class="photo-card" @click="showPhotoDetail(photo)">
            <el-image 
              :src="photo.url" 
              fit="cover"
              class="photo-image"
              loading="lazy"
            >
              <template #placeholder>
                <div class="image-placeholder">
                  <el-icon><Picture /></el-icon>
                </div>
              </template>
            </el-image>
            <div class="photo-info">
              <div class="photo-meta">
                <span class="photo-date">{{ photo.date }}</span>
                <el-tag size="small" :type="getTagType(photo.category)">
                  {{ photo.category }}
                </el-tag>
              </div>
              <p class="photo-desc">{{ photo.description }}</p>
              <div class="photo-location">
                <el-icon><Location /></el-icon>
                {{ photo.location }}
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 时间轴视图 -->
    <div v-else class="photos-timeline">
      <el-timeline>
        <el-timeline-item
          v-for="photo in filteredPhotos"
          :key="photo.id"
          :timestamp="photo.date"
          placement="top"
        >
          <el-card>
            <div class="timeline-photo" @click="showPhotoDetail(photo)">
              <el-image 
                :src="photo.url" 
                fit="cover"
              />
              <div class="timeline-info">
                <h4>{{ photo.title }}</h4>
                <p>{{ photo.description }}</p>
                <div class="timeline-meta">
                  <span>
                    <el-icon><Location /></el-icon>
                    {{ photo.location }}
                  </span>
                  <el-tag size="small" :type="getTagType(photo.category)">
                    {{ photo.category }}
                  </el-tag>
                </div>
              </div>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>

    <!-- 图片详情对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="selectedPhoto?.title"
      width="80%"
      destroy-on-close
    >
      <div v-if="selectedPhoto" class="photo-detail">
        <div class="detail-image">
          <el-image 
            :src="selectedPhoto.url"
            fit="contain"
          />
        </div>
        <div class="detail-content">
          <h3>{{ selectedPhoto.title }}</h3>
          <div class="detail-meta">
            <el-tag>{{ selectedPhoto.date }}</el-tag>
            <el-tag :type="getTagType(selectedPhoto.category)">
              {{ selectedPhoto.category }}
            </el-tag>
          </div>
          <p class="detail-desc">{{ selectedPhoto.description }}</p>
          <div class="detail-info">
            <p>
              <el-icon><Location /></el-icon>
              拍摄地点：{{ selectedPhoto.location }}
            </p>
          </div>
          <div class="detail-tags">
            <el-tag 
              v-for="tag in selectedPhoto.tags"
              :key="tag"
              size="small"
              effect="plain"
            >
              {{ tag }}
            </el-tag>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { 
  Grid, 
  Timer, 
  Picture, 
  Location,
  Camera,
  Collection
} from '@element-plus/icons-vue'
import { historicalPhotos } from '@/modules/module3/module3-kangri/data'
// 示例数据
import NavBar from '@/modules/module3/module3-kangri/components/NavBar.vue'

const searchQuery = ref('')
const category = ref('')
const viewMode = ref('grid')
const dialogVisible = ref(false)
const selectedPhoto = ref(null)

// 过滤图片
const filteredPhotos = computed(() => {
  return historicalPhotos.filter(photo => {
    const matchQuery = photo.description.includes(searchQuery.value) ||
                      photo.title.includes(searchQuery.value)
    const matchCategory = !category.value || photo.category === category.value
    return matchQuery && matchCategory
  })
})

// 获取标签类型
const getTagType = (category) => {
  const types = {
    '战役场景': 'danger',
    '军民生活': 'warning',
    '重要人物': 'success',
    '历史文物': 'info'
  }
  return types[category] || ''
}

// 显示图片详情
const showPhotoDetail = (photo) => {
  selectedPhoto.value = photo
  dialogVisible.value = true
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  background-color: #f5f7fa;
}

#app4 {
  min-height: 100vh;
  width: 100%;
  min-height: 100vh;
  width: 100%;
  background-image: url('@/modules/module3/module3-kangri/assets/image/bg-global.jpg'); /* 替换为你的背景图片路径 */
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* 使背景固定，不随滚动移动 */
}
.photos-container {
  padding: 20px;
}

.photos-header {
  margin-bottom: 30px;
}

.photo-card {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s;
}

.photo-card:hover {
  transform: translateY(-5px);
}

.photo-image {
  width: 100%;
  height: 200px;
}

.photo-info {
  padding: 12px;
}

.photo-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.photo-date {
  color: #666;
  font-size: 14px;
}

.photo-desc {
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.4;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.photo-location {
  color: #666;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.timeline-photo {
  display: flex;
  gap: 20px;
  cursor: pointer;
}

.timeline-photo .el-image {
  width: 200px;
  height: 150px;
  border-radius: 4px;
}

.timeline-info {
  flex: 1;
}

.timeline-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.photo-detail {
  display: flex;
  gap: 30px;
}

.detail-image {
  flex: 1;
}

.detail-content {
  flex: 1;
  padding: 20px;
}

.detail-meta {
  margin: 10px 0;
  display: flex;
  gap: 10px;
}

.detail-desc {
  margin: 20px 0;
  line-height: 1.6;
}

.detail-info {
  margin: 20px 0;
}

.detail-info p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  color: #666;
}

.detail-tags {
  margin-top: 20px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.image-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
}
</style> 